<template>
    <div class="cate">
        <!-- 搜索框 -->
        <div class="search-bar">
            <div class="search-box">
                <img src="../../static/images/icon/search.png" alt="" />
                <p class="sear-input">搜索您想要的商品</p>
            </div>
        </div>
        <!-- 分类 -->
        <div class="main">
            <!-- <div class="leftmenu"> -->
            <van-sidebar :active-key="categoryId">
                <van-sidebar-item
                    @click="changTab(item.categoryId)"
                    :title="item.categoryName"
                    v-for="(item, index) in cateList"
                    :key="index"
                />
            </van-sidebar>
            <!-- </div> -->
            <div class="rightcontent">
                <div ref="contentList" class="content">
                    <div class="adver-map">
                        <img
                            style="height: 72.5229px"
                            src="http://img-test.gz-yami.com/2019/04/4f148d81d60941b695cb77370a073653.jpg"
                            alt=""
                            mode="widthFix"
                        />
                    </div>
                    <div
                        class="cont-item"
                        v-for="(item, index) in List"
                        :key="index"
                        @click="toDetail(item.prodId)"
                    >
                        <div class="more-prod-pic">
                            <img
                                :src="item.pic"
                                alt=""
                                style="height: 75px"
                                id="pic"
                            />
                        </div>
                        <div class="prod-text-right">
                            <div class="prod-text more">
                                {{ item.prodName }}
                            </div>
                            <div class="cate-prod-info">{{ item.brief }}</div>
                            <div class="prod-price more">
                                <p class="symbol">￥</p>
                                <p>{{ item.price }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Bscroll from 'better-scroll';
export default {
    data() {
        return {
            categoryId: 0,
        };
    },
    created() {
        this.getcate();
    },
    mounted() {
        const bsSet = setTimeout(() => {
          console.log(this.$refs.contentList);
            if (this.$refs.contentList) {
                new Bscroll(this.$refs.contentList, {
                    scrollY: true,
                    click: true,
                });
                clearTimeout(bsSet);
            }
        }, 1000);
    },
    computed: {
        ...mapState({
            cateList: (state) => state.cate.cateList,
            List: (state) => state.cate.List,
        }),
    },
    methods: {
        ...mapActions({
            getcate: 'cate/getCate',
            gettabChange: 'cate/getTabChange',
        }),
        changTab(categoryId) {
            console.log(categoryId);
            this.gettabChange(categoryId);
        },
        toDetail(prodId) {
            // console.log(prodId);
            wx.navigateTo({
                url: `/pages/category/prod/detail?prodId=${prodId}`,
            });
        },
    },
    // watch:{
    //   categoryId:{
    //     handler: async (value)=>{
    //       if(value){
    //         console.log(value,"----------------");
    //       }
    //     }
    //   }
    // }
};
</script>

<style scoped>
.cate {
    display: flex;
    flex-direction: row;
    height: 100%;
}
.search-bar {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    color: #777;
    background: #fff;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
    z-index: 3;
    padding: 20rpx 0;
}
.main {
    position: fixed;
    display: flex;
    overflow: hidden;
    margin-top: 100rpx;
    height: calc(100% - 100rpx);
}
.search-bar .search-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60rpx;
    background: #f7f7f7;
    z-index: 999;
    width: 92%;
    border-radius: 50rpx;
    text-align: center;
    margin: auto;
}
.search-bar .search-box img {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
}
.sear-input {
    font-size: 28rpx;
}
.rightcontent {
    width: 550rpx;
    /* height: auto; */
    overflow: hidden;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 1;
}
.rightcontent .content {
    overflow-y: scroll;
}
.rightcontent .adver-map {
    width: auto;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    margin: 30rpx 20rpx 0;
}
.rightcontent .cont-item {
    padding: 0 20rpx 20rpx 20rpx;
    display: flex;
}

.rightcontent .cont-item .prod-text-right {
    margin-left: 20rpx;
    width: 75%;
}
.rightcontent .cont-item .prod-text-right .prod-text.more {
    margin: 0;
    font-size: 28rpx;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    color: #000;
}
.rightcontent .cont-item .prod-text-right .cate-prod-info {
    font-size: 22rpx;
    color: #999;
    margin: 10rpx 0 20rpx 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.rightcontent .cont-item .prod-text-right .prod-price.more {
    display: flex;
    font-size: 28rpx;
    color: #eb2444;
    font-family: arial;
}
#pic {
    width: 175px;
    display: inline-block;
    overflow: hidden;
}
</style>
